// 路由鉴权：项目当中的路由能否被访问的权限设置（某个路由什么条件下可以被访问，什么条件下不可以访问）
import router from '@/router'
// @ts-ignore
import nprogress from 'nprogress'
// 引入进度条样式
import 'nprogress/nprogress.css'
nprogress.configure({ showSpinner: false });
// 获取用户小仓库内部的token数据，判断是否登录成功
import pinia from './store'
import useUserStore from './store/modules/user'
import setting from './setting';
let userStore = useUserStore(pinia)

// 全局守卫：项目当中任意路由切换都会触发的钩子
// 全局前置守卫
router.beforeEach(async(to:any,from:any,next:any) => {
  document.title = `${setting.title} - ${to.meta.title}`
  // 访问某个路由之前的守卫
  // to：将要访问的路由对象
  // from：从哪个路由而来
  // next：路由放行函数
  nprogress.start()
  // 获取token，判断登录/未登录
  let token = userStore.token
  // 获取用户名字
  let username = userStore.username
  if(token){
    if(to.path == '/login'){
      next({path:'/'}) //登录成功 访问login 不能访问 要指向首页
    }else{
      if(username){
        next() // 登录成功且有用户信息 访问其他页面 直接放行
      }else{
        // 没有用户信息,在守卫这里发请求获取到了用户信息再放行
        // store/user.ts文件中 userInfo()方法前面加上async函数 会返回promise对象（pending|成功|失败）
        // async函数返回的promise状态取决于返回的结果
        try{
          await userStore.userInfo()
          next() // 获取用户信息之后，再放行
        }catch(error){
          // token过期：获取不到用户信息；用户手动修改本地存储token
          await userStore.userLogout()
          next({path:'/login',query:{redirect:to.path}})
        }
      }
    }
  }else{
    if(to.path == '/login'){
      next() // 未登录访问登录页 直接放行
    }else{
      next({path:'/login',query:{redirect:to.path}}) //未登录访问其他页面 放行到登录页
    }
  }
})

// 全局后置守卫
router.afterEach((to:any,from:any) => {
  nprogress.done()
})

// 1-任意路由切换实现进度条业务：nprogress
// 2-路由鉴权（路由组件访问权限设置）
// 全部路由组件：登录、404、任意路由、首页、数据大屏、权限管理、商品管理

//用户未登录:可以访问login,其余六个路由不能访问(指向login)
//用户登录成功:不可以访问login[指向首页],其余的路由可以访问

// Vue中的await主要用来等待异步操作的返回结果。await关键字只能在async函数中使用，它可以与async一起将异步函数转化为同步。具体的使用方式包括：
// 将一个函数声明为async函数，并在需要等待异步操作的地方使用await。
// 定义一个异步函数，如getArticleById，然后在该函数中使用await来等待http请求的返回值。
// 如果返回的值是一个Promise对象，可以使用async和await来简化代码逻辑。

// await配合async一起使用，相当于把异步函数变成了同步，await会等待后面表达式的返回结果之后才执行下一步